<template>
    <div class="table-wrap">
        <div class="title">用车耗材明细</div>
        <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" >
            <!-- <template slot="operation" slot-scope="text, record">
                <a-popconfirm v-if="dataSource.length" title="是否删除?" @confirm="() => onDelete(record.key)"
                    @visibleChange="handelvisibleChange">
                    <a href="javascript:;">删除</a>
                </a-popconfirm>
            </template> -->
        </a-table>
        <!-- <div class="btn-wrap">
            <a-button type="primary" class="editable-add-btn" @click="handleAdd">
                添加
            </a-button>
        </div>
        <div class="btn-wrap">
            <a-button type="primary" class="editable-add-btn" @click="handleGetTable">
                保存
            </a-button>
        </div> -->

        <!-- <editable-cell ref="editTable" :text="record" @edit="handleEdit" @add="onCellChange" /> -->
    </div>
</template>
<script>
import EditableCell from './editTble.vue';
import { listMaterial } from '@/api/vehicle/equipmentCon'
export default {
    components: {
        EditableCell,
    },
    data() {
        return {
            visibleDrawer: false,
            dataSource: [],
            count: 0,
            record: {},
            status: false,
            columns: [
                {
                    title: '品名',
                    dataIndex: 'device',
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '规格',
                    dataIndex: 'size',
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '数量',
                    dataIndex: 'count',
                    scopedSlots: { customRender: 'name' },
                },
                // {
                //     title: '操作',
                //     dataIndex: 'operation',
                //     scopedSlots: { customRender: 'operation' },
                // },
            ],
        };
    },
    created() {
        const data = this.$route.query
        console.log(data);
        listMaterial(2,data.vehicleId).then((res)=>{
            this.dataSource = res.data
        })
    },
    methods: {
        onCellChange(value) {
            const { count, dataSource } = this;
            let newData = value;
            newData.key = count
            this.dataSource = [...dataSource, newData];
            this.count = count + 1;
        },
        onDelete(key) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);
        },
        handleAdd() {
            if (!this.status) {
                this.$refs.editTable.open(1)
            }
        },
        showDrawer() {
            this.visibleDrawer = true;
        },
        handleEdit(value) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.map((item) => {
                if (item.key === this.record.key) {
                    value.key = item.key
                    return value
                } else {
                    return item
                }
            })
        },
        edit(record) {
            this.record = record
            if (!this.status) {
                this.$refs.editTable.open(2)
            }

        },
        handleGetTable() {
            this.dataSource.forEach(item => {
                for (let val in item) {
                    if (!item[val]) {
                        this.$message.error('表格中有未填写的数据')
                        return;
                    }
                }
            })
        },
        handelvisibleChange(val) {
            this.status = val
        }
    },
};
</script>
<style>
.editable-cell {
    position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
    padding-right: 24px;
}

.editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
}

.editable-cell-icon {
    line-height: 18px;
    display: none;
}

.editable-cell-icon-check {
    line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
    display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
    color: #108ee9;
}

.editable-add-btn {
    width: 70%;
    margin: 10px auto;
}

.btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-wrap {
    padding: 15px 10px;
    max-width: 750px;
    margin: auto;
}

.title {
    height: 50px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
th{
    padding: 8px !important;
}
td{
    padding: 12px 8px !important; 
}
</style>